<template>
  <div>
    <v-minLin v-bind:chartsId='items1.chartid' :keyName='items1.key' :key="items1.itemId" :data="items1.data"></v-minLin>
    <v-salesMap v-for="item in items2" v-bind:chartsId='item.chartid' :keyName='item.key' :key="item.itemId" :data="item.data"></v-salesMap>
    <v-line v-for="item in items3" v-bind:chartsId='item.chartid' :keyName='item.key' :key="item.itemId" :data="item.data"></v-line>
    <v-line1 v-bind:chartsId='items4.chartid' :keyName='items4.key' :data="items4.data"></v-line1>
    <v-line2 v-bind:chartsId='items5.chartid' :keyName='items5.key' :data="items5.data"></v-line2>
  </div>
</template>

<script>
import Vue from 'vue' 
import itemSale from '@/components/views/chart/sale'
import minLin from '@/components/views/chart/mix-lin'
import salesMap from '@/components/views/chart/salesMap'
import line from '@/components/views/chart/line_table'
import line1 from '@/components/views/chart/line_table1'
import line2 from '@/components/views/chart/line_table2'
export default {
  name: 'sales',
  data(){
        return {
            items1: {
                itemId: 3,
                chartid: 'myChart1',
                key: 1,
                data: {}
            },
            items2: [
                {
                    itemId: 4,
                    chartid: 'myChart4',
                    key: '区域销量累计图',
                    data: {}
                }
            ],
            items3: [
                {
                    itemId: 5,
                    chartid: 'myChart5',
                    key: '车身类型份额变化图',
                    data: {}
                }
            ],
            items4: {
                itemId: 6,
                chartid: 'myChart6',
                key: '派系份额变化变化图',
                data: {}
            },
            items5: {
                itemId: 7,
                chartid: 'myChart7',
                key: '燃烧类型份额变化图',
                data: {}
            }
        }
  },
  components: {
      'v-itemSale': itemSale,
      'v-minLin': minLin,
      'v-salesMap': salesMap,
      'v-line': line,
      'v-line1': line1,
      'v-line2': line2,
  },
  mounted (){
      let _this = this;
      this.$http.get('gz/getMonthSales')
      .then(function(res){
          let data = res.data;
          _this.items1.data = data;
      });
      this.$http.get('gz/getProvinceYearSales')
      .then(function(res){
          let data = res.data;
          _this.items2[0].data = data;
      });
      this.$http.get('gz/getCarLevelSales')
      .then(function(res){
          let data = res.data;
          _this.items3[0].data = data;
      });
      this.$http.get('gz/getFactionSales')
      .then(function(res){
          let data = res.data;
          _this.items4.data = data;
      });
      this.$http.get('gz/getFuelSales')
      .then(function(res){
          let data = res.data;
          
          _this.items5.data = data;
      });
  }
}
</script>
